<template>
  <component
    :is="compName"
    v-model="currValue"
    v-bind="childProps"
    :inputProps="inputProps"
    :keyBoardProps="keyBoardProps"
    ref="inputElement"
    @input="emitInput"
    @focus="emitFocus"
    @blur="emitBlur"
    @submit="emitSubmit"
  >
    <template slot="prepend">
      <slot name="prepend"></slot>
    </template>
    <template slot="append">
      <slot name="append"></slot>
    </template>
    <template slot="prependFixed">
      <slot name="prependFixed"></slot>
    </template>
    <template slot="appendFixed">
      <slot name="appendFixed"></slot>
    </template>
  </component>
</template>
<script>
import defaultInput from "./components/defaultInput/index";
import passWordInput from "./components/passWordInput/index";
import inputComps from "./inputComps";
import { getActiveInput } from "@devass/js/blur.js";
import EventKeys from "@enu/eventKeys.js";
export default {
  name: "inputEntryComponent",
  components: { defaultInput, passWordInput },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
    inputProps: {
      default: () => {
        return {};
      },
    },
    keyBoardProps: {
      default: () => {
        return {};
      },
    },
  },
  created() {
    console.log("input created", this.inputProps, this.keyBoardProps);
    this.addEventListener();
  },
  beforeDestroy() {
    this.removeEventListener();
  },
  computed: {
    compName() {
      if (
        this.inputProps &&
        inputComps.indexOf(this.inputProps.compName) !== -1
      ) {
        return this.inputProps.compName;
      } else {
        return inputComps[0];
      }
    },
    inputRef() {
      return this.$refs["inputElement"];
    },
    currValue: {
      get() {
        return this.value;
      },
      set(data) {
        console.log("inputEntry change:", data);
        this.$emit("change", data);
      },
    },
    childProps() {
      //子组件的props
      let { compName, ...otherProps } = this.inputProps;
      return otherProps;
    },
  },
  methods: {
    addEventListener() {
      this.$root.$on(
        EventKeys["vue-keyboard-cn-append-item"],
        this.appendHandler
      );
      this.$root.$on(
        EventKeys["vue-keyboard-cn-append-delete"],
        this.deleteHandler
      );
    },
    removeEventListener() {
      this.$root.$off(
        EventKeys["vue-keyboard-cn-append-item"],
        this.appendHandler
      );
      this.$root.$off(
        EventKeys["vue-keyboard-cn-append-delete"],
        this.deleteHandler
      );
    },
    appendHandler(data) {
      let activeInput = getActiveInput();
      let children = this.$children[0];
      if (activeInput.vm == children && data !== undefined) {
        //修复0
        children.appendHandler(data);
      }
    },
    deleteHandler() {
      let activeInput = getActiveInput();
      let children = this.$children[0];
      console.log("inputEntry:delete1", activeInput, children);
      if (activeInput.vm == children) {
        console.log("inputEntry:delete");
        children.deleteHandler();
      }
    },
    select() {
      //对应input的select
      typeof this.inputRef.select === "function" && this.inputRef.select();
    },
    unSelect() {
      //对应input的unselect
      typeof this.inputRef.unSelect() === "function" &&
        this.inputRef.unSelect();
    },
    emitInput(data) {
      console.log("entry input:input", data);
      this.$emit("input", data);
    },
    emitFocus(data) {
      console.log("entry input:focus", data);
      this.$emit("focus", data);
    },
    emitBlur(data) {
      console.log("entry innput:blur", data);
      this.$emit("blur", data);
    },
    emitSubmit(data) {
      console.log("entry input:submit");
      this.$emit("submit", data);
    },
  },
};
</script>